@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/info_edit.css')}}">

@section('content')
<div class="mainHrContent" id="hrDeposit">
    <div class="storelistTitle">
        <span class="storelistTitle_left">
            <span>

                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.hrmy.hrIndex') }}">用户中心</a>
                > 资产管理中心

            </span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button>免费发布需求</button>
        </span>
    </div>
    <div class="hrContent">
        @include('home.hrmy.menu')
        <div class="basicInfo" id="hrDeposits">
            <div class="basicInfo_title">
                <span></span>
                申请提现
            </div>
            <div class="userDetails">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item prop="amount">
                        <p style="align-items: baseline;">
                            <span class="details_title"><a>
                                    *
                                </a>
                                申请提现金额：
                            </span>
                            <span>
                                <el-input v-model="form.amount"></el-input>&nbsp;&nbsp;元
                                <br>
                                <span class="cash_notice">
                                    <span>注意：</span><span>
                                        <span>
                                            1.可申请提现最低金额为100元；
                                        </span>
                                        <span>
                                            2.输入提现金额必须是不低于100元及其以上的整数；
                                        </span>
                                    </span>
                                </span>
                            </span>
                        </p>
                    </el-form-item>
                    <p>
                        <span class="details_title">
                            当前可提现余额：
                        </span>
                        <a style="font-weight:500">@{{balance}}元</a>
                    </p>
                    <el-form-item prop="bank_no">
                        <p>
                            <span class="details_title"><a>
                                    *
                                </a>
                                提现银行卡号：
                            </span>
                            <el-input v-model="form.bank_no"></el-input>
                        </p>
                    </el-form-item>
                    <el-form-item prop="bank_user">
                        <p>
                            <span class="details_title"><a>
                                    *
                                </a>
                                银行卡联系人姓名：
                            </span>
                            <el-input v-model="form.bank_user"></el-input>
                        </p>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <p>
                            <span class="details_title"><a>
                                    *
                                </a>
                                银行卡联系人电话：
                            </span>
                            <el-input v-model="form.phone"></el-input>
                        </p>
                    </el-form-item>
                    <el-form-item prop="bank_name">
                        <p>
                            <span class="details_title"><a>
                                    *
                                </a>
                                银行名称：
                            </span>
                            <el-input v-model="form.bank_name"></el-input>
                        </p>
                    </el-form-item>
                </el-form>
                <button @click="submitForm('ruleForm')">提交申请</button>
            </div>
        </div>
    </div>
</div>
<style>
    .details_title>a {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #D10018;
    }

    .userDetails .el-form-item__error {
        left: 30%;
    }

    .details_title {
        width: 200px;
    }
</style>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrDeposit = new Vue({
            el: '#hrDeposits',
            data: () => {
                return {
                    imageUrl: '',
                    uploadUrl: UPLOAD_FILE,
                    balance: "",
                    form: {
                        amount: "",
                        bank_no: "",
                        bank_user: "",
                        phone: "",
                        bank_name: "",
                    },
                    rules: {
                        amount: [{
                            required: true,
                            message: ' ',
                            trigger: 'blur'
                        }],
                        bank_no: [{
                            required: true,
                            message: '银行卡号不能为空',
                            trigger: 'blur'
                        }],
                        bank_user: [{
                            required: true,
                            message: '开户行姓名不能为空',
                            trigger: 'blur'
                        }],
                        phone: [{
                            required: true,
                            validator: validateTel,
                            // message: '提现人手机号不能为空',
                            trigger: 'blur'
                        }],
                        bank_name: [{
                            required: true,
                            message: '开户行不能为空',
                            trigger: 'blur'
                        }],
                    },
                }
            },
            watch: {
                'form': {
                    handler: (val) => {
                        val.amount = parseInt(val.amount || 0)
                    },
                    deep: true
                }
            },
            created() {
                let data = {}
                apiAjax("{{ route('home.user.userAssetApi')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.balance = res.data.balance;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
            },
            mounted() {},
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let data = {
                                amount: this.form.amount,
                                bank_no: this.form.bank_no,
                                bank_user: this.form.bank_user,
                                phone: this.form.phone,
                                bank_name: this.form.bank_name,
                            }
                            apiAjax("{{ route('home.user.userCashOutApi')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                            }, (erro) => {

                            });
                            if (parseFloat(this.form.amount) < 100) {
                                if (parseFloat(this.form.amount) > parseFloat(this.balance)) {

                                } else {
                                    this.$message({
                                        message: "提现金额不得大于余额",
                                        type: 'warning'
                                    });
                                }
                            } else {
                                this.$message({
                                    message: "提现金额需大于100元",
                                    type: 'warning'
                                });
                            }
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection